<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
<script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
<!-- 生产环境中不建议使用 -->
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>

<div id="test"></div>

<script type="text/babel">
    //类式组件
    class Weather extends React.Component {
        // 初始化数据
        state = {
            isHot: false,
            wind: '微风'
        }

        //自定义方法（箭头函数无this，找到外层this作为this）
        checkWeather = () => {
            const isHot = this.state.isHot
            this.setState({isHot: !isHot})
        }

        render() {
            const {isHot, wind} = this.state
            return <h1 onClick={this.checkWeather}>今天天气很{isHot ? '炎热' : '寒冷'},并且还有{wind}</h1>
        }
    }

    ReactDOM.render(<Weather/>, document.getElementById("test"))


</script>
</body>
</html>